<!-- 题库 -->
<template>
    <div class="home-container">
        <div class="filter">
            <!-- 标签筛选 -->
            <el-select multiple placeholder="标签" v-model="selectStore.selectedTags" style="width: 220px;" size="large"
                @change="selectChange()" value-key="tag_en">
                <el-option v-for="tag in selectStore.allTags" :key="tag.tag_en" :label="tag.tag_cn" :value="tag">
                    {{ tag.tag_cn }}
                </el-option>
            </el-select>


            <el-select clearable placeholder="难度" v-model="selectStore.selectedLevel" style="width: 220px;" size="large"
                @change="selectChange()" value-key="level_en">
                <!-- 难度筛选 -->
                <el-option v-for="level in selectStore.allLevels" :key="level.level_en" :label="level.level_cn"
                    :value="level">
                    {{ level.level_cn }}
                </el-option>
            </el-select>
        </div>

        <el-table :data="problemList" stripe style="width: 100%" size="large">
            <el-table-column prop="title" label="题目">
                <!-- 题目 -->
                <template #default="{ row }">
                    <router-link :to="{ path: `/problem/${row.title_en}` }">{{ row.title_cn }}</router-link>
                </template>
            </el-table-column>
            <el-table-column prop="tag" label="标签">
                <!-- 标签 -->
                <template #default="{ row }">
                    <el-tag v-for="tag in row.tags" :key="tag" :value="tag" style="margin-right: 3px;" round
                        type="success">
                        {{ tag }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="level" label="难度">
                <!-- 难度 -->
                <template #default="{ row }">
                    <el-tag :type="levelView(row.level)">{{ row.level }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="pass" label="通过数">
                <!-- 通过数 -->
                <template #default="{ row }">
                    {{ row.passes }}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getProblemListAPI } from '@/apis/problem';
import { useSelectStore } from '@/stores/problem';

const route = useRoute()
const router = useRouter()
const selectStore = useSelectStore() // 选项store

const problemList = ref([])

onMounted(() => {
    getProblemList("/problem" + route.fullPath)
    getTags()
})

// 监视路由变化
watch(route, () => {
    getProblemList("/problem" + route.fullPath)
    if (route.fullPath === "/problemlist") {
        selectStore.clearSelectedLevel()
        selectStore.clearSelectedTags()
    }
})


// 获取题目列表
function getProblemList(url) {
    getProblemListAPI(url).then((res) => {
        if (res.code === 0) {
            // 获取题目列表成功
            problemList.value = res.problems
        }
    }).catch(() => {
        ElMessage({ type: "error", message: "获取题库失败" })
    })
}

// 获取标签
function getTags() {
    selectStore.getAllTags()
}

// 检测筛选项的改变
function selectChange() {
    // 先获取筛选的标签（英文）
    const levelEn = selectStore.selectedLevel ? selectStore.selectedLevel.level_en : null
    const tagEnArray = selectStore.selectedTags.map(tag => tag.tag_en)

    // 对标签进行编码（因为可能会有多个）
    const encodeTags = encodeURIComponent(tagEnArray.join(','))

    let url = '/problemlist'
    if (levelEn) {
        url += `?level=${levelEn}`
    }
    if (encodeTags) {
        url += `${levelEn ? '&' : '?'}tags=${encodeTags}`
    }
    router.push(url)
}


function levelView(level) {
    switch (level) {
        case "简单":
            return "primary";
        case "中等":
            return "warning";
        case "困难":
            return "danger";
        default:
            return "info";
    }
}


</script>

<style scoped lang="scss">
.filter {
    display: flex;
    justify-items: center;
    margin-top: 20px;
}
</style>